<template>
    <div class="pjtSence" @mousedown="down">
        <div class="left">
            <div style="overflow:auto;height:100%;scrollbar-width: none;padding-top: 26px;" class="scroll">
                <div class="noList" v-if="treeList.length==0">暂无数据</div>
                <nav v-for="(nav,i) in treeList" :class="{'active':nav.focus} " :key="i">
                    <div class="primary-nav" :class="{'active':nav.focus}" @click="goto(nav,i)">
                        <span>{{ nav.label }}({{ nav.total }})</span>
                        <img v-if="nav.children.length>0" src="./../../assets/svg/fold.svg" :class="{'triangle':true,'active1':nav.focus}" />
                    </div>
                    <ul :style="{'height':nav.focus? 'auto' : 0}" v-if="(nav.children||[]).length">
                        <li v-for="(link,index) in nav.children" :key="index" @click="highlightFn(link,index)" @mousedown="downItem(link,index)" :class="{'active':childIdList.includes(link.ids)}">
                            <div class="picture"><img :src="picList[link.pid]"/></div>
                            <div class="sub-nav text-overflow">
                                <span>{{ link.label }}</span>
                            </div>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="drag" ref="drag" v-show="dragFlag&&imgFlag" :style="{backgroundImage: 'url(' + dargUrl + ')'}"></div>
            <div class="imitatePopTips tipLeft" v-if="imitatePopMark2">
                <div class="title">第二步  拖拽设备</div>
                <p class="name">操作提示：</p>
                <p>可选择某个设备，按住鼠标左键拖拽至右侧建筑场景中，模拟实际效果试试看~</p>
                <div class="ok"><span @click="imitateMark2">我知道啦</span></div>
            </div>
        </div>
        <div class="right">
            <div class="imgupload" @mousedown="devDown" ref="screenPre">
                <div :style="[{'background-image':'url('+imgUrl+')'}]" v-if="imgFlag" class="imgUrl"></div>
                <div class="imitatePopTips" v-if="imitatePopMark1">
                    <div class="title">第一步  开始编辑</div>
                    <p class="name">操作提示：</p>
                    <p>请先点击“开始编辑”按钮，即可从左侧设备菜单中拖拽设备图标到右侧现场中进行模拟哦~</p>
                    <div class="ok"><span @click="imitateMark1">我知道啦</span></div>
                </div>
                <div class="upload" v-if="!imgFlag">
                    <img src="./../../assets/images/prj/sence/sence_photo.png" alt="">
                    <span>上传格式: .JPG .PNG .JPEG (图片上传不可超过10M)</span>
                    <div style="position: relative; margin:20px 0">
                        <el-button type="primary" size="small" plain :disabled="!auth.isUpload">上传图片</el-button>
                        <input id="upload_file" type="file" @change="getphoto" accept=".jpg, .png .jpeg" style="position: absolute;cursor: pointer;left:0;top:0;height:40px;opacity: 0; width:80px;"/>
                    </div>
                </div>
                <div class="btn" v-if="imgFlag">
                    <el-button size="small" v-if="!isAdd" @click="cancel(0)">取消</el-button>
                    <el-button type="primary" size="small" @click="add" v-if="!isAdd">确定</el-button>
                    <div style="position: relative; margin:20px 10px" v-if="!isAdd">
                        <el-button type="primary" size="small" plain>更换图片</el-button>
                        <input id="upload_file" type="file" @change="getphoto" accept=".jpg, .png .jpeg" style="position: absolute;cursor: pointer;left:0;top:0;height:40px;opacity: 0; width:80px;"/>
                    </div>
                    <el-button type="primary" size="small" @click="edit" v-if="isAdd" style="margin-right:20px" :disabled="!auth.isEdit">开始编辑</el-button>
                    <el-button type="warning" size="small" @click="close" v-if="!isAdd" style="margin-right:20px">删除</el-button>
                </div>
                <div
                    v-for="(item,index) in detailsList"
                    :key="index" class="item"
                    :data-clientWidthRate="clientWidthRate"
                    :data-clientHeightRate="clientHeightRate"
                    :data-x="item.x"
                    :data-y="item.y"
                    :class="'item'+item.objType"
                    :style="[{'cursor':!isAdd ? 'move' :'default' }, {'top':(item.y* clientHeightRate) +'px', 'left': (item.x*clientWidthRate) +'px'}]"
                    @mousedown="devItem(item,index)">
                    <div :class="['dargItem', item.activeFlag ? 'activeFlag' :'shadow' ]" @mousedown.stop="stopPropagationFn()">
                        <span>{{ item.objName }}</span>
                        <i class="el-icon-remove-outline" v-if="!isAdd" @click="removeItem(item,index)"></i>
                    </div>
                </div>
            </div>
        </div>
        <Modal v-model="deleteModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">您是否确认删除图片以及设备分布位置</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain>确定</el-button>
            </div>
        </Modal>
        <Modal v-model="cancelModal" title="取消" width="360px;" :mask-closable="false">
            <div style="margin:10px">您是否确认保存编辑内容</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain>保存</el-button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getSenceDetails,
    getSenceUploadImg,
    getSenceEdit,
    getSenceAdd,
    getSenceDel,
} from "@/api/api.js";
import {senceInit} from "@/mixins/sence.js";

export default {
    mixins: [senceInit],
    data() {
        return {
            deptId: "",
            imgUrl: "",
            detailsList: [],
            imgFlag: false,
            isAdd: false,
            cnacelFlag: false,
            sceneId: "",
            deleteModal: false,
            cancelModal: false,
            addFlag: false,
            dragFlag: false,
            //屏幕宽度比例
            clientWidthRate:'',
            //屏幕高度比例
            clientHeightRate:'',
            screenWidth: document.body.clientWidth,
            screenPre: "",
            childIdList: [],
            itemList: [],
            dargUrl: "",
            devFlag: false,
            //拖拽id
            itemId: "",
            //拖拽pid
            objType: "",
            posList: [],//记录最原始的点的坐标;
            dragItemFlag: false,
            ratio: "",
            auth: {
                isUpload: false,
                isEdit: false,
            },  //上传或编辑权限标志
            picList:{
                4:require("@/assets/images/prj/sence/drag_water.png"),
                5:require("@/assets/images/prj/sence/drag_env.png"),
                6:require("@/assets/images/prj/sence/drag_canre.png"),
                7:require("@/assets/images/prj/sence/drag_lift.png"),
                8:require("@/assets/images/prj/sence/drag_gantry.png"),
                9:require("@/assets/images/prj/sence/drag_bridge.png"),
                10:require("@/assets/images/prj/sence/drag_crawler.png"),
                12:require("@/assets/images/prj/sence/drag_gas.png"),
                20:require("@/assets/images/prj/sence/drag_fim.png"),
                30:require("@/assets/images/prj/sence/drag_energy_water.png"),
                31:require("@/assets/images/prj/sence/drag_energy_electricity.png"),
                32:require("@/assets/images/prj/sence/drag_energy_box.png")
            },
            visible:true,
            imitatePopMark1:true,
            imitatePopMark2:false,
        };
    },
    methods: {
        initAuth() {
            this.auth.isEdit = this.btnList.includes('prj/sence/edit')
            this.auth.isUpload = this.btnList.includes('prj/sence/imgUpload')
        },
        goto(nav, i) {
            this.treeList[i].focus = !this.treeList[i].focus;
        },
        //现场模拟详情
        getDetails() {
            this.childIdList = [];
            this.itemList = [];
            let params = {
                deptId: this.deptId,
            };
            getSenceDetails(params)
                .then((res) => {
                    if (res.code == 200) {
                        if (res.data) {
                            this.detailsList = JSON.parse(JSON.stringify(res.data.details)) || [];
                            this.posList = JSON.parse(JSON.stringify(res.data.details)) || [];
                            this.sceneId = res.data.sceneId || "";
                            if (res.data.imgUrl) {
                                this.imgUrl = res.data.imgUrl;
                                this.imgFlag = true;
                                this.isAdd = true;
                                this.cnacelFlag = true;
                            } else {
                                this.imgUrl = "";
                                this.imgFlag = false;
                                this.isAdd = false;
                                this.cnacelFlag = false;
                            }
                            for (let i = 0; i < this.detailsList.length; i++) {
                                this.childIdList.push(this.detailsList[i].objType + '-' + this.detailsList[i].objId);
                                this.itemList.push(
                                    {
                                        id: this.detailsList[i].objId,
                                        label: this.detailsList[i].objName,
                                        pid: this.detailsList[i].objType,
                                        ids: this.detailsList[i].objType + '-' + this.detailsList[i].objId,
                                    }
                                )
                            }
                            this.$forceUpdate();
                        } else {
                            this.detailsList = [];
                            this.childIdList = [];
                            this.sceneId = "";
                            this.imgUrl = "";
                            this.imgFlag = false;
                            this.isAdd = false;
                            this.cnacelFlag = false;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //添加图片
        getphoto(e) {
            var file = document.getElementById("upload_file").files[0];
            //文件大小
            var imagSize = document.getElementById("upload_file").files[0].size;
            //文件类型
            var Ary = file.type;
            var formdata = new FormData();
            formdata.append("file", file, file.name);
            let config = {
                headers: {"Content-Type": "multipart/form-data"}
                // headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            };
            if (!(Ary == "image/png" || Ary == "image/jpg " || Ary == "image/jpeg")) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请上传正确的文件格式"
                });
                return;
            }
            if (imagSize > 1024 * 1024 * 10) {
                this.$Modal.warning({
                    title: "图片过大",
                    content: "请上传10M以内的图片"
                });
                return;
            }
            getSenceUploadImg(formdata, config)
                .then(res => {
                    if (res.code == 200) {
                        this.$Message.success("上传成功");
                        this.imgUrl = res.data.url;
                        this.imgFlag = true;
                        //上传成功之后清除历史记录
                        document.getElementById("upload_file").value = "";
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //保存
        add() {
            if (!this.addFlag) {
                let params = {
                    imgUrl: this.imgUrl,
                    deptId: this.deptId,
                    details: this.detailsList,
                    ratio: 100
                }
                getSenceAdd(params).then(res => {
                    if (res.code == 200) {
                        this.getDetails();
                        this.cancelModal = false;
                        this.$Message.success("保存成功");
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else {
                let params = {
                    imgUrl: this.imgUrl,
                    deptId: this.deptId,
                    details: this.detailsList,
                    sceneId: this.sceneId,
                    ratio: 100

                }
                getSenceEdit(params).then(res => {
                    if (res.code == 200) {
                        this.getDetails();
                        this.cancelModal = false;
                        this.addFlag = false;
                        this.$Message.success("编辑成功");
                    } else {
                        this.$Message.warning(res.msg);
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        submit() {
            this.add();
        },
        //编辑
        edit(){
            if(this.imitatePopMark1){
                localStorage.setItem('imitatePopMark1',false)
                this.imitatePopMark1=false
            }
            this.isAdd = !this.isAdd;
            this.addFlag = true;
        },
        //取消
        cancel(type) {
            if (type == 0) {
                this.cancelModal = true
            } else if (type == 1) {
                this.deleteModal = false
            } else if (type == 2) {
                this.cancelModal = false;
                this.getDetails();
                if (this.cnacelFlag) {
                    this.isAdd = !this.isAdd;
                } else {
                    this.imgFlag = false;
                    this.imgUrl = "";
                }
            }

        },
        //删除
        close() {
            this.deleteModal = true;
        },
        detele() {
            getSenceDel(this.sceneId).then(res => {
                if (res.code == 200) {
                    this.deleteModal = false;
                    this.addFlag = false;
                    this.getDetails();
                    this.$Message.success("删除成功");
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error => {
                console.log(error)
            })
        },
        //高亮显示
        highlightFn(link, index) {
            this.detailsList.map(item => link.id == item.objId && link.pid == item.objType ? item.activeFlag = !item.activeFlag : item.activeFlag = false);
            this.$forceUpdate()
        },
        downItem(link, index) {
            if (!this.isAdd) {
                if (!this.imgFlag) {
                    // this.$Modal.warning({
                    //     title: "提示",
                    //     content: "请上传现场模拟图片后进行拖拽"
                    // });
                    return;
                }
                if (link.pid == 4) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_water.png")
                } else if (link.pid == 5) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_env.png")
                } else if (link.pid == 6) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_canre.png")
                } else if (link.pid == 7) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_lift.png")
                } else if (link.pid == 8) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_gantry.png")
                } else if (link.pid == 9) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_bridge.png")
                } else if (link.pid == 10) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_crawler.png")
                } else if (link.pid == 12) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_gas.png")
                } else if (link.pid == 20) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_fim.png")
                } else if (link.pid == 30) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_energy_water.png")
                } else if (link.pid == 31) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_energy_electricity.png")
                } else if (link.pid == 32) {
                    this.dargUrl = require("../../assets/images/prj/sence/drag_energy_box.png")
                }
                if (this.childIdList.includes(link.ids)) {
                    this.dragFlag = false;
                } else {
                    this.childIdList.push(link.ids);
                    this.itemList.push(link)
                    this.dragFlag = true
                }
            }
        },
        //计算比例
        getProportion() {
            this.clientHeightRate = this.$refs['screenPre'].clientWidth / 1600;
            this.clientWidthRate = this.$refs['screenPre'].clientHeight / 800;
        },
        removeItem(item, index) {
            let childIdList = this.childIdList;
            this.detailsList.splice(index, 1);
            for (let i = 0; i < this.childIdList.length; i++) {
                if (childIdList[i] == (item.objType + '-' + item.objId)) {
                    childIdList.splice(i, 1);
                    this.itemList.splice(i, 1);
                }
            }
            this.childIdList = childIdList;
        },
        down(e) {
            if(this.imitatePopMark2){
                localStorage.setItem('imitatePopMark2',false)
                this.imitatePopMark2=false
            }
            if (this.dragFlag && this.imgFlag && !this.isAdd) {
                this.$refs.drag.style.top=e.clientY - 105+'px'
                this.$refs.drag.style.left=e.clientX - 25+'px'
                document.onmousemove = (e) => {
                    let left = e.clientX - 25;
                    let top = e.clientY - 105;
                    //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                    //移动当前元素
                    this.$refs.drag.style.top=top+'px'
                    this.$refs.drag.style.left=left+'px'
                }
                document.onmouseup = (e) => {
                    this.dragFlag = false;
                    //点的相对坐标
                    let posX = e.clientX - this.$refs['screenPre'].offsetLeft-25;
                    let posY = e.clientY - this.$refs['screenPre'].offsetTop-105;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (posX < 0 || posX > this.$refs['screenPre'].clientWidth || posY < 0 || posY > this.$refs['screenPre'].clientHeight) {
                        this.$Modal.warning({
                            title: "提示",
                            content: "请拖拽到规定的区域"
                        });
                        this.childIdList.splice(this.childIdList.length - 1, 1)
                        this.itemList.splice(this.itemList.length - 1, 1);
                        return;
                    }
                    let obj = {
                        objId: this.itemList[this.itemList.length - 1].id,
                        objName: this.itemList[this.itemList.length - 1].label,
                        objType: this.itemList[this.itemList.length - 1].pid,
                        x: posX/this.clientWidthRate,
                        y: posY/this.clientHeightRate,
                    }
                    this.detailsList.push(obj)
                }
            }
            ;
        },
        devItem(item, index) {
            if (!this.isAdd) {
                this.devFlag = true;
                this.itemId = item.objId;
                this.objType = item.pid || item.objType;
            }
        },
        //阻止默认行为
        stopPropagationFn() {
            return false
        },
        devDown(e) {
            if (!this.isAdd && this.devFlag) {
                let odiv = e.target;        //获取目标元素
                //算出鼠标相对元素的位置
                let disX = e.clientX - odiv.offsetLeft;
                let disY = e.clientY - odiv.offsetTop;
                document.onmousemove = (e) => {
                    let left = e.clientX - disX;
                    let top = e.clientY - disY;
                    //移动当前元素
                    odiv.style.left = left + 'px';
                    odiv.style.top = top + 'px';
                },
                document.onmouseup = (e) => {
                    this.devFlag = false;
                    //可拖拽到区域对象两边空白区域的宽度高度;
                    //点的相对坐标
                    let posX = e.clientX - disX;
                    let posY = e.clientY - disY;
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if (posX < 0 || posX > this.$refs['screenPre'].clientWidth || posY < 0 || posY > this.$refs['screenPre'].clientHeight) {
                        this.$Modal.warning({
                            title: "提示",
                            content: "请拖拽到规定的区域"
                        });
                        if(posX < 0){
                            odiv.style.left = '30px';
                        }
                        if(posX > this.$refs['screenPre'].clientWidth){
                            odiv.style.left = this.$refs['screenPre'].clientWidth-70+'px';
                        }
                        if(posY < 0){
                             odiv.style.top = '30px';
                        }
                        if( posY > this.$refs['screenPre'].clientHeight){
                            odiv.style.top = this.$refs['screenPre'].clientHeight-120+'px';
                        }
                        return;
                    }else{
                        for (let i = 0; i < this.detailsList.length; i++) {
                            if (this.detailsList[i].objId == this.itemId && this.objType == this.detailsList[i].objType) {
                                this.detailsList[i].x = posX/this.clientWidthRate
                                this.detailsList[i].y = posY/this.clientHeightRate
                            }
                        } 
                    }
                }
            }
        },
        //窗口大小缩放监控
        resizeFn(){
            this.getProportion();
        },
        imitateMark1(){
            localStorage.setItem('imitatePopMark1',false)
            this.imitatePopMark1=false
            this.imitatePopMark2=true
        },
        imitateMark2(){
            localStorage.setItem('imitatePopMark2',false)
            this.imitatePopMark2=false
        }
    },
    mounted() {
        const that = this;
        that.deptId = that.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));//localStorage当中的arr项存取的是按钮权限列表
        that.getDetails();
        this.initAuth()
        this.getProportion();
        window.addEventListener("resize",this.resizeFn );
    },
    created() {
        this.getInit();
        this.imitatePopMark1=localStorage.getItem('imitatePopMark1')?JSON.parse(localStorage.getItem('imitatePopMark1')):true
        this.imitatePopMark2=localStorage.getItem('imitatePopMark2')?JSON.parse(localStorage.getItem('imitatePopMark2')):false
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.detailsList = [];
                this.getDetails();
                this.getInit();
            }
        },
    },
    beforeDestroy() {
        window.removeEventListener('resize',  this.resizeFn);
    },
};

</script>
<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
</style>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}

nav {
    .primary-nav {
        cursor: pointer;
        height:36px;
        padding-left:30px;
        padding-right:10px;
        font-size: 16px;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        .triangle {
            width:14px;
            height:7.6px;
            // transition: all 0.2s;
            // transform: rotate(-90deg);
            // margin-right: 5px;
        }

        &.active {
            // transform: rotate(0deg);
            position: relative;
            &::before{
                content: '';
                width: 4px;
                height: 36px;
                background: #1891FF;
                border-radius: 0px 6px 6px 0px;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .active1 {
            transform: rotate(180deg);
        }
    }

    ul {
        transition: all 0.2s;
        overflow: hidden;
        color: #fff;
        display: flex;
        flex-wrap:wrap;
        margin-bottom:20px;
        padding: 0 15px;
        li {
            list-style: none;
            position: relative;
            width: 50%;
            padding:5px;
            box-sizing: border-box;
            cursor: pointer;
            &.active{
                .picture{
                    border-color: #1891FF;
                    background: #fff;
                }
            }
            .picture{
                padding: 10px;
                border: 1px solid #fff;
                border-radius: 6px;
                overflow: hidden;
                background: #F2F2F2;
                img{
                    width: 100%;
                }
            }
            .triangle {
                position: absolute;
                width: 16px;
                height: 9px;
                right: 15px;
                top: 20.5px;
                transition: all 0.2s;
                transform: rotate(-180deg);
            }

            .active1 {
                transform: rotate(0deg);
            }

            .sub-nav {
                font-size: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                text-decoration: none;
                color: #A9ACAD;
                text-align: center;
                line-height:40px;
                margin-bottom: 10px;
                .checkbox {
                    position: absolute;
                    left: 30px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 14px;
                    height: 14px;
                }
            }

            .router-link-active {
                color: #1891FF;
                background: rgba(230, 242, 255, 1);
                border-radius: 4px !important;
                // border-left: 2px solid #fff;
            }

            .active {
                color: #1891FF;
                // background: rgba(230, 242, 255, 1) !important;;
                border-radius: 4px !important;
            }

            p {
                padding-left: 80px;
                cursor: pointer;
                font-size: 14px;
                color: #fff;

                a {
                    text-decoration: none;
                    cursor: pointer;
                    font-size: 14px;
                    color: #fff;
                }
            }
        }
    }
}

.pjtSence {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #F5F5F5;
    display: flex;
    .left {
        width: 200px;
        height: 100%;
        background: #fff;
        z-index: 999;
        transition: all 0.5s ease-in;

        .close-btn {
            position: absolute;
            top: 50%;
            right: 0%;
            background-image: url('../../assets/images/prj/sence/close-btn.png');
            width: 25px;
            height: 25px;
            background-repeat: no-repeat;
            cursor: pointer;
            transition: all 0.5s ease-in;

            &.open {
                transform: translate(50%, -50%);
            }

            &.off {
                transform: rotate(180deg) translate(-50%, 50%);
            }
        }

        .drag {
            position: absolute;
            top: 50px;
            left: 75px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: pxToRem(14);
            border: 1px dashed #1891FF;
            z-index: 100;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    }

    .right {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .imgupload {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
            overflow: hidden;

            .upload {
                width: pxToRem(400);
                height: pxToRem(160);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                img {
                    width: pxToRem(80);
                    height: pxToRem(60);
                }

                span {
                    font-size: pxToRem(16);
                    color: #DCDCDC;
                    margin-top: pxToRem(10);;
                }
            }

            .imgUrl {
                width: 100%;
                height: 100%;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                // border-radius: 10px;
            }

            .btn {
                position: absolute;
                z-index: 100;
                width: 100%;
                height: pxToRem(40);
                display: flex;
                justify-content: flex-end;
                align-items: center;
                background: rgba(0, 0, 0, 0.5);
                left: 0;
                bottom: 0;
            }

            .item {
                position: absolute;
                height: pxToRem(60);
                width: pxToRem(60);
                display: flex;
                justify-content: space-between;
                align-items: center;
                z-index: 10;
                cursor: pointer;
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .dargItem {
                    position: absolute;
                    top: pxToRem(-25);
                    right: pxToRem(-45);
                    display: flex;

                    &.shadow {
                        background: #314860;
                        box-shadow: 0px pxToRem(3) pxToRem(20) rgba(0, 0, 0, 0.24);
                    }

                    &.activeFlag {
                        background: #2d88f6;
                        box-shadow: 0px pxToRem(3) pxToRem(20) #2d88f6;
                    }

                    opacity: 1;
                    border-radius: pxToRem(12);
                    justify-content: space-between;
                    align-items: center;
                    width: pxToRem(150);
                    -webkit-user-select: none;

                    -moz-user-select: none;

                    -ms-user-select: none;

                    user-select: none;
                    color: #fff;

                    span {
                        display: block;
                        width: pxToRem(135);
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                    i {
                        display: block;
                        width: pxToRem(15);
                        height: pxToRem(15);
                        margin-right: pxToRem(10);
                        color: #E57834;
                        cursor: pointer;
                    }
                }
            }

            .item4 {
                background-image: url(./../../assets/images/prj/sence/drag_water.png);
            }

            .item5 {
                background-image: url(./../../assets/images/prj/sence/drag_env.png);
            }

            .item6 {
                background-image: url(./../../assets/images/prj/sence/drag_canre.png);
            }

            .item7 {
                background-image: url(./../../assets/images/prj/sence/drag_lift.png);
            }

            .item8 {
                background-image: url(./../../assets/images/prj/sence/drag_gantry.png);
            }

            .item9 {
                background-image: url(./../../assets/images/prj/sence/drag_bridge.png);
            }

            .item10 {
                background-image: url(./../../assets/images/prj/sence/drag_crawler.png);
            }

            .item12 {
                background-image: url(./../../assets/images/prj/sence/drag_gas.png);
            }

            .item20 {
                background-image: url(./../../assets/images/prj/sence/drag_fim.png);
            }

            .item30 {
                background-image: url(./../../assets/images/prj/sence/drag_energy_water.png);
            }

            .item31 {
                background-image: url(./../../assets/images/prj/sence/drag_energy_electricity.png);
            }

            .item32 {
                background-image: url(./../../assets/images/prj/sence/drag_energy_box.png);
            }

        }
    }
}

.scroll::-webkit-scrollbar {
    display: none;
}

/*兼容火狐*/
.scroll {
    scrollbar-width: none;
}

/* 兼容IE10+ */
.scroll {
    -ms-overflow-style: none;
}
.noList{
    text-align: center;
    line-height: 60px;
    font-size:16px;
}
.imitatePopTips{
    width: pxToRem(300);
    padding: pxToRem(14);
    position: absolute;
    bottom: pxToRem(60);
    right: pxToRem(10);
    background: #fff;
    border-radius: pxToRem(4);
    font-size: pxToRem(16);
    box-shadow: 0px 1px 12px 1px rgba(0,0,0,0.1600);
    &.tipLeft{
        width: pxToRem(260);
        top:20px;
        left:220px;
        right: auto;
        height: pxToRem(240);
        &::after{
            left: pxToRem(-5);
            bottom:pxToRem(200);
            right:auto;
            border-bottom:1px solid rgba(0,0,0,0.1600);
            border-left:1px solid rgba(0,0,0,0.1600);
        }
    }
    &::after{
        content: '';
        width: pxToRem(10);
        height: pxToRem(10);
        background: #fff;
        position: absolute;
        bottom:pxToRem(-5);
        right:50px;
        transform: rotate(45deg);
    }
    .title{
        font-size: pxToRem(22);
        font-weight: bold;
        margin-bottom: pxToRem(10);
    }
    .name{
        font-size: pxToRem(18);
        margin-bottom: pxToRem(6);
    }
    p{
        line-height: pxToRem(30);
    }
    .ok{
        height: pxToRem(30);
        text-align: right;
        margin-bottom: pxToRem(10);
        span{
            font-size: pxToRem(20);
            cursor: pointer;
        }
    }
}
</style>
